import React, { Component } from 'react'
import { BrowserRouter, Route, Redirect } from 'react-router-dom'
import { connect } from 'react-redux'
import { getUserInfo } from '@/store/actions'

const loading = () => <div className="loader"></div>

// Containers
const AppLayout = React.lazy(() => import('./layouts'))

// pages
const Login = React.lazy(() => import('./views/user/login'))

class App extends Component {

  render() {
    const { token } = this.props
    const isProd = process.env.REACT_APP_ENV === 'production'
    // console.log('isProd', isProd)

    return (
      <BrowserRouter basename={isProd ? 'react-tool-admin' : '/'}>
        <React.Suspense fallback={loading()}>
          <Route exact path="/login" name="Login Page" render={(props) => <Login {...props} />} />
          <Route path="/" render={(props) => {
            if (!token) {
              return <Redirect to="/login" {...props} />
            } else {
              return <AppLayout {...props} />
            }
          }} />
        </React.Suspense>
      </BrowserRouter>
    )
  }
}

export default connect((state) => state.user, { getUserInfo })(App)
